import React, { FC, useCallback, useRef } from 'react';
import { Button, Drawer, Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

interface ISearchDrawerProps {
  visible: boolean;
  onSearch?: (value: string) => void;
  setVisible: (flag: boolean) => void;
  defaultValue?: string;
  placeholder?: string;
}

const SearchDrawer: FC<ISearchDrawerProps> = (props) => {
  const { visible, onSearch, setVisible, defaultValue, placeholder } = props;
  const searchInputRef = useRef(null);

  const handleSearch = useCallback(() => {
    const current: any = searchInputRef.current;
    onSearch && onSearch(current.state.value || '');
    // if (current) {
    //   setParams({
    //     page: 1,
    //     search: current.state.value || '',
    //   });
    // }
    setVisible(false);
  }, [searchInputRef.current, setVisible]);
  return (
    <Drawer
      title={null}
      placement="top"
      closable={false}
      visible={visible}
      getContainer={false}
      contentWrapperStyle={{ width: '100%', height: '100%' }}
    >
      <div className="flex ai-center">
        <div
          className="flex ai-center flex-1"
          style={{
            height: '40px',
            border: '1px solid rgba(225, 236, 247, 100)',
            borderRadius: '25px',
            padding: '0 15px',
          }}
        >
          <SearchOutlined style={{ fontSize: '16px' }} />
          <Input
            defaultValue={defaultValue || ''}
            ref={searchInputRef}
            placeholder={placeholder}
            onPressEnter={() => handleSearch()}
            bordered={false}
          />
        </div>
        <Button type="link" onClick={() => setVisible(false)}>
          取消
        </Button>
      </div>
    </Drawer>
  );
};

export default SearchDrawer;
